<!--
 * @Description: 个人争先创优申请
 * @Author: oooh
 * @Date: 2024-04-26 19:45:39
 * @LastEditors: oooh
 * @LastEditTime: 2024-08-07 17:48:15
 * @FilePath: \Civil_Servant_Performance_PC\src\views\work-approval\dept-honor\index.vue
-->
<template>
  <div class="app-container">
    <div class="text-banner">
      <span>荣誉奖励和典型推介</span>
      <el-button class="ml-10" size="mini" type="primary" circle icon="el-icon-refresh" plain @click="handleRefresh" />
    </div>
    <div class="float-right mb-10">
      <el-button
        size="mini"
        type="primary"
        plain
        icon="el-icon-menu"
        :disabled="!selectionList.length"
        v-hasPermi="['approval:dept-honor:pass']"
        @click="handleBatchApproval('pass')"
      >
        批量通过
      </el-button>
      <el-button
        size="mini"
        type="danger"
        plain
        icon="el-icon-menu"
        :disabled="!selectionList.length"
        v-hasPermi="['approval:dept-honor:reject']"
        @click="handleBatchApproval('reject')"
      >
        批量退回
      </el-button>
    </div>
    <el-table :data="tableList" border style="width: 100%" v-loading="tableLoading" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"> </el-table-column>

      <el-table-column label="序号" type="index" align="center">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="获得荣誉日期" prop="matterDate" width="130" align="center"></el-table-column>
      <el-table-column label="荣誉类型" prop="honorTypeDict" min-width="180" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.honorTypeDictName || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="说明描述" prop="describe" min-width="180" align="center"></el-table-column>
      <el-table-column label="申请站办所" prop="deptName" min-width="140" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column label="依据材料" prop="materialUrls" align="center" min-width="120">
        <template slot-scope="scope">
          <div v-if="scope.row.materialUrls">
            <el-tooltip
              v-for="(url, index) in scope.row.materialUrls.split(',')"
              :key="index"
              effect="dark"
              :content="formatFileUrl(url)['name']"
              placement="top-start"
            >
              <el-button type="text" @click="handlePreviewFile(url)" class="file-preview-btn" size="mini">
                {{ formatFileUrl(url)['name'] }}
              </el-button>
            </el-tooltip>
          </div>
          <span v-else>-</span>
        </template>
      </el-table-column>

      <el-table-column label="申请日期" prop="applyDate" width="130" align="center"></el-table-column>
      <el-table-column prop="score" label="得分" width="120" align="center">
        <template slot-scope="scope">
          <el-input-number
            v-if="$auth.hasRole('performanceOffice')"
            v-model="scope.row.score"
            placeholder="得分"
            controls-position="right"
            :min="0"
          ></el-input-number>
          <span v-else>{{ isNaN(scope.row.score) || scope.row.score == null ? '-' : scope.row.score }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="140" fixed="right">
        <template slot-scope="scope">
          <ApprovalLog :biz-id="scope.row.id" v-hasPermi="['approval:dept-honor:pass']">
            <el-button type="text" @click="handleApproval(scope.$index, scope.row, 'pass')" size="mini"> 通过 </el-button>
          </ApprovalLog>

          <ApprovalLog :biz-id="scope.row.id" v-hasPermi="['approval:dept-honor:reject']">
            <el-button type="text" size="mini" @click="handleApproval(scope.$index, scope.row, 'reject')" class="color-danger ml-10">
              退回
            </el-button>
          </ApprovalLog>
        </template>
      </el-table-column>
    </el-table>
    <FilePreview :visible.sync="filePreviewVisible" :file="previewFile"></FilePreview>
  </div>
</template>

<script>
import FilePreview from '@/components/FilePreview'
import { listAudit as list, approval } from '@/api/work/dept-honor'
import dayjs from 'dayjs'
import { mixins } from '@/mixins'
import ApprovalLog from '@/components/ApprovalLog'

export default {
  name: 'approval_annual-honor',
  mixins: [mixins],
  dicts: ['biz_dept_year_honor_type'],
  props: {},
  components: { FilePreview, ApprovalLog },
  data() {
    return {
      filePreviewVisible: false,
      previewFile: {},
      tableLoading: false,
      tableList: [],
      tableItem: {
        matterDate: undefined,
        honorTypeDict: undefined,
        describe: undefined,
        materialUrls: undefined,
        applyDate: dayjs().format('YYYY-MM-DD')
      },
      mapping: {
        matterDate: '获得荣誉日期',
        honorTypeDict: '荣誉类型',
        describe: '说明描述',
        applyDate: '申请日期'
      },
      queryParams: {},
      selectionList: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getList()
  },
  methods: {
    // 表格多选
    handleSelectionChange(selection) {
      this.selectionList = selection
    },
    // 校验表格是否可选
    checkSelectable(raw, index) {
      if (raw.auditStatusDict === 'DSH') {
        return true
      }
      return false
    },
    // 批量审批
    handleBatchApproval(operation) {
      let auditRemark = '同意'
      let auditStatusDict = 'SHTG'
      if (operation === 'reject') {
        auditRemark = '不同意'
        auditStatusDict = 'SHBTG'
      }
      let params = this.selectionList.map(item => {
        return { id: item.id, score: item.score, auditRemark, auditStatusDict }
      })
      let content = `您正在审批已选中的 ${this.selectionList.length} 项工作，请输入审批意见`
      this.approvalPrompt(operation, content, auditRemark, params)
    },
    // 审批操作
    handleApproval(index, raw, operation) {
      let params = { id: raw.id, score: raw.score, auditStatusDict: 'SHTG', auditRemark: '同意' }
      if (operation === 'reject') {
        params.auditStatusDict = 'SHBTG'
        params.auditRemark = '不同意'
      }
      let content = `您正在审批第 【${index + 1}】 项工作，请输入审批意见`
      this.approvalPrompt(operation, content, params.auditRemark, [params])
    },
    // 审批窗口
    approvalPrompt(operation, content, inputValue, params) {
      this.$prompt(content, '审批提醒', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder: '输入审批意见',
        inputType: 'textarea',
        inputPattern: /\S/,
        inputValue: inputValue,
        inputErrorMessage: '审批意见不能为空',
        beforeClose: (action, instance, done) => {
          params.forEach(item => {
            item.auditRemark = instance.inputValue
          })
          if (action === 'confirm') {
            const loading = this.$loading({
              target: '.el-message-box',
              lock: true,
              text: '数据处理中',
              spinner: 'el-icon-loading',
              background: 'rgba(255,255,255,0.6)'
            })
            approval(params)
              .then(() => {
                loading.close()
                if (operation === 'pass') {
                  this.$modal.msgSuccess('已通过')
                } else if (operation === 'reject') {
                  this.$modal.msgError('已退回')
                }
                this.handleRefresh()
                done()
              })
              .catch(() => {
                loading.close()
                done()
              })
          } else {
            done()
          }
        }
      })
    },
    // 审核提示内容格式输出
    aduitContentFormat(raw) {
      let content = []
      content.push(`<p>审核意见：${raw.auditStatusDict || ' - '}</p>`)
      content.push(`<p>审核时间：${raw.supervisionAuditTime || ' - '}</p>`)
      return content.join('')
    },
    // 功能类型、审核状态、提交状态
    checkBtnVisible(type, audit) {
      switch (type) {
        case 'pass': // 通过
        case 'reject': // 退回
          return audit === 'DSH'
        case 'finish': // 审核已完成
          return audit === 'SHTG'
        case 'returned': // 审核已完成
          return audit === 'SHBTG'
        default:
          return false
      }
    },
    // 预览文件
    handlePreviewFile(url) {
      let fileItem = this.formatFileUrl(url)
      this.previewFile = { url, ...fileItem }
      this.filePreviewVisible = true
    },
    // 审核提示内容格式输出
    aduitContentFormat(raw) {
      let content = []
      content.push(`<p>审核意见：${raw.auditRemark || ' - '}</p>`)
      content.push(`<p>审核时间：${raw.auditTime || ' - '}</p>`)
      return content.join('')
    },
    // 校验工作计划表单字段是否可填
    checkWorkPlanDisabled(audit) {
      if (audit === 'SHTG' || audit === 'DSH') {
        return true
      }
      return false
    },

    handleRefresh() {
      this.getList()
    },
    getList() {
      this.tableLoading = true
      list(this.queryParams)
        .then(res => {
          this.tableLoading = false
          this.tableList = res.rows
        })
        .catch(err => {
          this.tableLoading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: auto;
}

::v-deep .el-input-number--medium {
  width: auto;
}

::v-deep .el-button [class*='el-icon-'] + span {
  margin-left: 0;
}
</style>
